<template>
  <div
    id="fatherDiv"
    style="
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
    "
  >
    <div
      style="
        color: white;
        width: 100%;
        margin: 30px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
      "
    >
      <div>页面列表</div>
      <el-button
        type="primary"
        @click="createPage"
        style="width: 200px"
        :style="{
          background:
            'linear-gradient(to right bottom,#1a57b9,#2473e3,#1d57b9)',
        }"
        >创建页面</el-button
      >
    </div>
    <div
      style="
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        overflow: auto;
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
      "
      :style="{
        height: contentHeight + 'px',
      }"
    >
      <div
        @mouseenter="mouseenterPage(index)"
        @mouseleave="mouseleavePage"
        v-for="(item, index) in pageList"
        :key="index"
        style="
          border: solid 2px #1071bc;
          padding: 10px;
          margin: 5px;
          display: flex;
          flex-direction: column;
          width: 200px;
          height: 180px;
        "
        :style="{
          background:
            hoverItem == index
              ? 'linear-gradient(to bottom,#267FFC ,rgba(255, 0, 0, 0))'
              : null,
          border: hoverItem == index ? 'solid 2px white' : 'solid 2px #1071bc',
        }"
      >
        <div
          style="
            display: flex;
            align-items: center;
            color: white;
            font-weight: 700;
          "
        >
          <img
            src="../assets/pageLogo.png"
            style="width: 20px; height: 20px; margin-right: 5px"
            alt=""
          />
          {{ item.pageName }}
        </div>
        <img
          v-if="item.pageImg != null"
          style="width: 100%; height: 100px; position: relative; margin: 10px 0"
          :src="item.pageImg"
        />
        <div
          v-if="item.pageImg == null"
          style="
            width: 100%;
            height: 100px;
            position: relative;
            margin: 10px 0;

            text-align: center;
            line-height: 100px;
          "
        >
          未保存页面
        </div>
        <div
          style="
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 0;
          "
        >
          <div
            @click="delPage(item)"
            style="
              height: 30px;
              width: 40px;
              font-size: 15px;
              border-radius: 5px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #fff;
              cursor: pointer;
            "
            :style="{
              background: '#A64E4E',
            }"
          >
            删除
          </div>
          <div style="display: flex; align-items: center">
            <div
              @click="editPage(item)"
              style="
                height: 30px;
                width: 40px;
                font-size: 15px;
                border-radius: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                cursor: pointer;
              "
              :style="{
                background: '#73B2FF',
              }"
            >
              编辑
            </div>

            <div
              @click="previewPage(item)"
              style="
                height: 30px;
                width: 40px;
                font-size: 15px;
                border-radius: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                cursor: pointer;
                margin-left: 5px;
              "
              :style="{
                background: '#2F5894',
              }"
            >
              启用
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="提示" :visible.sync="createPageDialog" width="30%" center>
      <span
        ><el-input v-model="newPageName" placeholder="输入页面名称"></el-input
      ></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="createPageDialog = false">取 消</el-button>
        <el-button type="primary" @click="addNewPage">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from "../axios/request";
import eventBus from "../util/myEventBus";
export default {
  data() {
    return {
      pageList: [],
      language: 0,
      createPageDialog: false,
      newPageName: null,
      isFullScreen: false,
      element: null,
      rootUrl: null,
      hoverItem: null,
      contentHeight: null,
    };
  },
  methods: {
    mouseleavePage() {
      this.hoverItem = null;
    },
    mouseenterPage(index) {
      this.hoverItem = index;
    },
    goToBackGroundSetting() {
      this.$router.push("/manageMent/admin");
    },
    scheduledTaskPage() {
      this.$router.push("/scheduledTask");
    },
    async addNewPage() {
      this.$store.state.lastMethod = "addNewPage";
      this.$store.state.lastData = null;
      let res = await request({
        url: "/page/api/saveNewPage",
        method: "POST",
        data: {
          pageName: this.newPageName,
          pageBackgroundImage: "assets/pic.png",
          pageWidth: null,
          pageHeight: null,
          highestZIndex: null,
        },
      });
      if (res.data.status == 200) {
        this.$router.push(
          "/editPage/" + this.newPageName + "/" + this.language
        );
      }
    },
    toggleFullScreen() {
      if (!this.isFullScreen) {
        // this.enterFullScreen();
      } else {
        // this.exitFullScreen();
      }
    },
    enterFullScreen() {
      if (this.element.requestFullscreen) {
        this.element.requestFullscreen();
      } else if (this.element.mozRequestFullScreen) {
        // Firefox
        this.element.mozRequestFullScreen();
      } else if (this.element.webkitRequestFullscreen) {
        // Chrome, Safari, Opera
        this.element.webkitRequestFullscreen();
      } else if (this.element.msRequestFullscreen) {
        // IE/Edge
        this.element.msRequestFullscreen();
      }
      this.isFullScreen = true;
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        // Firefox
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        // Chrome, Safari, Opera
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        // IE/Edge
        document.msExitFullscreen();
      }
      this.isFullScreen = false;
    },
    createPage() {
      this.createPageDialog = true;
    },
    async delPage(item) {
      this.$confirm("是否删除页面 " + item.pageName + " ?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.$store.state.lastMethod = "delPage";
          this.$store.state.lastData = item;
          let res = await request({
            url: "/page/api/delPageByPageId/" + item.id,
            method: "DELETE",
          });
          if (res.data.status == 200) {
            this.$store.state.checkedPassword = "true";
            this.getAllPages();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    editPage(item) {
      this.toggleFullScreen();
      this.$router.push("/editPage/" + item.pageName + "/" + this.language);
    },
    previewPage(item) {
      this.$router.push("/displayPage/" + item.pageName + "/" + this.language);
    },
    async getAllPages() {
      this.$store.state.lastMethod = "getAllPages";
      this.$store.state.lastData = null;
      let res = await request({
        url: "/page/api/getAllPages",
        method: "GET",
      });
      if (res.data.status == 200) {
        this.pageList = res.data.data;
      }
    },
    async getLanguage() {
      let res = await request({
        url: "/language/api/getLanguage",
        method: "GET",
      });
      if (res.data.status == 200) {
        this.$store.commit("changeLanguage", res.data.data);
      }
    },
  },
  mounted() {
    const resizeObserver = new ResizeObserver((entries) => {
      requestAnimationFrame(() => {
        for (const entry of entries) {
          this.contentHeight = entry.contentRect.height - 50 - 60;
        }
      });
    });
    resizeObserver.observe(document.getElementById("fatherDiv"));
    this.rootUrl = window.location.origin;
    this.element = document.querySelector("#app");
    this.getLanguage();
    if (this.languageStr != null) {
      switch (this.languageStr) {
        case "简体中文":
          this.language = 0;
          break;
        case "繁體中文":
          this.language = 1;
          break;
        case "English":
          this.language = 2;
          break;

        default:
          break;
      }
    } else {
      this.languageStr = "简体中文";
      this.language = 0;
    }

    this.getAllPages();
    eventBus.$on("addNewPage", this.addNewPage);
    eventBus.$on("getAllPages", this.getAllPages);
    eventBus.$on("delPage", this.delPage);
  },
  beforeDestroy() {
    eventBus.$off("addNewPage");
    eventBus.$off("getAllPages");
    eventBus.$off("delPage");
  },
};
</script>

<style scoped>
</style>